// cmp/menu/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    show:false,
    animationClear:{},
    animation1:{},
    animation2:{},
    animation3:{},

  },

  /**
   * 组件的方法列表
   */
  methods: {
    onBox(){
      if(!this.data.show){
        this.onClick();
        this.setData({ show : true})
      }else{
        this.takeback();
        this.setData({ show: false })
      }
    },
    /**
     * 弹出动画
     */
    onClick(){
      let animationClear = wx.createAnimation({
        duration: 500,
        timingFunction: 'ease-out'
      })
      let animation1 = wx.createAnimation({
        duration: 550,
        timingFunction: 'ease-out'
      })
      let animation2 = wx.createAnimation({
        duration: 600,
        timingFunction: 'ease-out'
      })
      let animation3 = wx.createAnimation({
        duration: 650,
        timingFunction: 'ease-out'
      })
      animationClear.rotateZ(135).backgroundColor('#665135').step();
      animation1.translate(0, -70).opacity(1).scale(1).step();
      animation2.translate(0, -120).opacity(1).scale(1).step();
      animation3.translate(0, -170).opacity(1).scale(1).step();
      this.setData({
        animationClear: animationClear.export(),
        animation1: animation1.export(),
        animation2: animation2.export(),
        animation3: animation3.export(),
      })
    },
    //收回动画
    takeback: function () {
      let animationClear = wx.createAnimation({
        duration: 500,
        timingFunction: 'ease-out'
      })
      let animation1 = wx.createAnimation({
        duration: 500,
        timingFunction: 'ease-out'
      })
      let animation2 = wx.createAnimation({
        duration: 500,
        timingFunction: 'ease-out'
      })
      let animation3 = wx.createAnimation({
        duration: 500,
        timingFunction: 'ease-out'
      })
      animationClear.rotateZ(0).backgroundColor('#FE9301').step();
      animation1.translate(0, 0).opacity(0).scale(0.6).step();
      animation2.translate(0, 0).opacity(0).scale(0.6).step();
      animation3.translate(0, 0).opacity(0).scale(0.6).step();
      this.setData({
        animationClear: animationClear.export(),
        animation1: animation1.export(),
        animation2: animation2.export(),
        animation3: animation3.export(),
      })
    },
  }
})
